/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { Component } from 'react';
import { connect } from 'dva';
import WrapperCharts from './components/WrapperCharts';

@connect(({ loading, router, user, setting }) => ({
  userType: setting.options.key,
  router,
  shop_id: user.currentUser.shop_id,
  userInfo: user.currentUser.user_info,
  operatoring: loading.effects['list/getBrandsList'],
  loading: loading.effects['list/getPostList'],
}))
export default class Overview extends Component {
  state = {
    cm_id: 'all',
    init_branchId: [], // 初始所属区域id
    init_branch: [], // 初始所属区域列表
    isZyAccount: false,
  };

  componentDidMount = () => {
    const { dispatch, router, userInfo, userType, area_id } = this.props;
    const { branch = [], branchLevel } = userInfo;
    const isZyAccount = userType == 'post';
    const initBranchId = branch.filter(val => (isZyAccount ? val.level != 0 : val)).map(i => i.id);
    let kbCode = []; // 快宝驿站下拉需要的code参数

    // 设置所属区域数据
    // 总公司
    if (branchLevel == 0 && branch.length == 0 && isZyAccount) {
      this.setState({
        init_branch: [
          {
            id: '0',
            name: '中国邮政集团有限公司',
            level: '0',
            pid: '-2', // 自定义pid用来区分是否是单独属于总公司账号
          },
        ],
        init_branchId: ['0', '334'], // 中邮总司暂时默认选中浙江省
      });
    } else {
      kbCode = [...branch].map(i => i.code && i.code).pop();
      //  非总公司
      this.setState({
        init_branch: branch,
        init_branchId: initBranchId,
      });
    }

    this.setState(
      {
        isZyAccount,
        cm_id: router.location.query.cm_id || 'all',
      },
      () => {
        const { init_branchId } = this.state;
        dispatch({
          type: 'global/getYzList',
          payload: {
            [isZyAccount ? 'branch_id' : 'code']: isZyAccount ? [...init_branchId].pop() : kbCode,
            area_id: userType == 'yz' ? area_id : null,
          },
        });
      },
    );
  };

  render() {
    const { init_branch, init_branchId, isZyAccount, cm_id } = this.state;
    const { cols, userInfo, onTabChange } = this.props;

    // 判断中邮账号是否是支局及区县，是则不显示公众号粉丝页面
    const isZyZJ = isZyAccount && (userInfo.branchLevel == 3 || userInfo.branchLevel == 4);
    const isZj = userInfo.branchLevel == 4;
    return (
      <div>
        {!isZj && (
          <WrapperCharts
            title="昨日数据总览"
            name="yesterdaData"
            chartType="data"
            isZyAccount={isZyAccount}
            branch={init_branch}
            branchId={init_branchId}
            showDaySelect={false}
            showBrandSelect={false}
            showAreaSelect={false}
            showYzSelect={false}
            cols={cols}
            cmIdFromQuery={cm_id}
          />
        )}
        <WrapperCharts
          title="出入库统计"
          name="storageSummary"
          chartType="chart"
          isZyAccount={isZyAccount}
          branch={init_branch}
          branchId={init_branchId}
          cols={cols}
          cmIdFromQuery={cm_id}
          transform={[
            {
              type: 'fold',
              fields: ['in_num', 'out_num', 'back_num'],
              key: 'city',
              value: 'temperature',
            },
          ]}
        />
        <WrapperCharts
          title="品牌占比"
          chartTitle={['入库品牌占比', '出库品牌占比', '寄件数品牌占比']}
          rankType={['in', 'out', 'order']}
          numType="num"
          name="brandPie"
          chartType="pies"
          showBrandSelect={false}
          isZyAccount={isZyAccount}
          branch={init_branch}
          branchId={init_branchId}
          cols={cols}
          cmIdFromQuery={cm_id}
        />
        {!isZj && (
          <WrapperCharts
            title={isZyAccount ? '区域排名' : '驿站排名'}
            chartTitle={['入库数排名前10', '出库率排名前10']}
            name="regionalRanking"
            chartType="histogram"
            rankType={['in', 'out_rate']}
            onTabChange={isZyAccount ? onTabChange : null}
            showAreaSelect={isZyAccount}
            showYzSelect={false}
            showBrandSelect={false}
            isZyAccount={isZyAccount}
            branch={init_branch}
            branchId={init_branchId}
            cols={cols}
            cmIdFromQuery={cm_id}
          />
        )}
        <WrapperCharts
          name="storageRate"
          chartType="chart"
          chartTitle={['入库通知率统计', '出库率统计']}
          showBrandSelect={false}
          isZyAccount={isZyAccount}
          branch={init_branch}
          branchId={init_branchId}
          cmIdFromQuery={cm_id}
          cols={{
            temperature: {
              type: 'linear',
              min: 0,
              max: 100,
              tickInterval: 10,
              formatter: value => `${value}%`,
            },
          }}
          transform={[
            {
              type: 'fold',
              fields: ['inStorageRate'],
              key: 'city',
              value: 'temperature',
            },
            {
              type: 'fold',
              fields: ['outStorageRate'],
              key: 'city',
              value: 'temperature',
            },
          ]}
        />
        <WrapperCharts
          title="投诉率统计"
          name="complaintRate"
          chartType="chart"
          showBrandSelect={false}
          showDaySelect={false}
          isZyAccount={isZyAccount}
          branch={init_branch}
          branchId={init_branchId}
          cmIdFromQuery={cm_id}
          cols={{
            temperature: {
              type: 'linear',
              min: 0,
              max: 10000,
              tickInterval: 2000,
              formatter: value => `${value}‱`,
            },
          }}
          transform={[
            {
              type: 'fold',
              fields: ['complaintRate'],
              key: 'city',
              value: 'temperature',
            },
          ]}
        />
        <WrapperCharts
          title="短信统计"
          name="smsSummary"
          chartType="chart"
          showBrandSelect={false}
          isZyAccount={isZyAccount}
          branch={init_branch}
          branchId={init_branchId}
          cmIdFromQuery={cm_id}
          transform={[
            {
              type: 'fold',
              fields: ['sms_num'],
              key: 'city',
              value: 'temperature',
            },
          ]}
        />
        <WrapperCharts
          title="订单统计"
          name="orderSummary"
          chartType="chart"
          showBrandSelect={false}
          isZyAccount={isZyAccount}
          branch={init_branch}
          branchId={init_branchId}
          cmIdFromQuery={cm_id}
          transform={[
            {
              type: 'fold',
              fields: ['num', 'real_num'],
              key: 'city',
              value: 'temperature',
            },
          ]}
        />
        {!isZyZJ && (
          <WrapperCharts
            title="粉丝统计"
            name="fansSummary"
            chartType="chart"
            showBrandSelect={false}
            showAreaSelect={false}
            showYzSelect={false}
            isZyAccount={isZyAccount}
            branch={init_branch}
            branchId={init_branchId}
            cmIdFromQuery={cm_id}
            transform={[
              {
                type: 'fold',
                fields: ['new_add', 'total'],
                key: 'city',
                value: 'temperature',
              },
            ]}
          />
        )}
      </div>
    );
  }
}
